<template> 
  <el-dialog
    :title="!role.id ? '新增角色' : '修改角色'"
    :close-on-click-modal="true"
    :visible.sync="visible">
    <el-form :model="role"
             :rules="rules"
             ref="role"
             label-width="150px" size="small">
      <el-form-item label="角色名称：">
        <el-input v-model="role.name" style="width: 250px"></el-input>
      </el-form-item>
      <el-form-item label="描述：">
        <el-input v-model="role.description"
                  type="textarea"
                  :rows="5"
                  style="width: 500px"></el-input>
      </el-form-item>
      <el-form-item label="是否启用：">
        <el-radio-group v-model="role.status">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="onSubmit('role')">确定</el-button>
    </span>
  </el-dialog>
</template>
<script>
  import {createRole,updateRole,getRole} from '@/api/ums/role';

  //菜单实体
  const defaultRole={
      id:'',
      name: '',
      description: '',
      adminCount:0,
      status:1,
      sort:1000
  };

  export default {
    name: 'roleDetail',
    data() {
      return {
        visible: false,
        role:Object.assign({}, defaultRole),
        rules: {
          name: [
            {required: true, message: '请输入角色名', trigger: 'blur'}
          ]
        }
      }
    },
    created() {

    },
    methods: {
        //初始化
        init (id) {
          this.role.id = id || 0
          this.visible = true
          if (!this.role.id) {
            this.resetForm('role');
          } else {
              // 修改
            getRole(id).then(response => {
                  if(response && response.code == 200){
                      this.role = response.data;
                  }else{
                      this.resetForm('role');
                  }
              });
          }
        },
        //提交
        onSubmit(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.$confirm('是否提交角色', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                if (this.role.id) {
                  updateRole(this.role.id, this.role).then(response => {
                      if(response && response.code == 200){
                          this.resetForm('role');
                          this.$message({
                              message: '修改成功',
                              type: 'success',
                              duration:1000,
                              onClose: () => {
                                  this.visible = false
                                  this.$emit('refreshDataList')
                              }
                          });
                      }else {
                          this.$message.error(response.msg)
                      }
                  });
                } else {
                  createRole(this.role).then(response => {
                      if(response && response.code == 200){
                          this.resetForm('role');
                          this.$message({
                              message: '添加成功',
                              type: 'success',
                              duration:1000,
                              onClose: () => {
                                  this.visible = false
                                  this.$emit('refreshDataList')
                              }
                          });
                      }else {
                          this.$message.error(response.msg)
                      }
                  });
                }
              });
            } else {
              this.$message({
                message: '验证失败',
                type: 'error',
                duration:1000
              });
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.role = Object.assign({},defaultRole);
      }
    }
  }
</script>
<style>
</style>


